<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>报名介绍页</title>
    <script src="${pageContext.request.contextPath}/dist/jquery/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/bootstrap/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/dist/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/General.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/weekContest.css">
</head>
<body>
<jsp:include page="../public/header.jsp"/>
<div class="content-wrapper">
    <div id="base_content">
        <div id="contest-app">
            <div class="contest-base">
                <div class="container contest-detail-base">
                    <div class="page-heading">
                        <div class="back-to-contest">
                            <a href="${pageContext.request.contextPath}/competitionPage">
                                <i class="fa fa-caret-left" aria-hidden="true"><img src="../../images/jkf/backcontent.svg" alt=""></i>
                                &nbsp;返回竞赛主页
                            </a>
                        </div>
                        <div class="title">第${id}场周赛</div>
                    </div>
                    <div class="callout callout-info">
                        本场竞赛将在<span id="timer_span"></span>后开始
                    </div>
                    <p style="margin: 40px 0;line-height: 1.7">
                        <div class="contest-information container">
                            <div class="row">
                                <div class="col-sm-8 col-md-9">
                                    <h3 class="text-300">
                                        欢迎来到第${id}场竞赛
                                    </h3>
                                    <br>
                                    <h4 class="text-300">
                                        <i class="fa fa-newspaper-o">
                                            <img id="zhuyiImg" src="${pageContext.request.contextPath}/images/jkf/zhuyishixiang.svg" alt="">
                                        </i>
                                        &nbsp;重要提示
                                    </h4>
                                    <ol>
                                        <li>比赛时长为<b>一个半小时</b>(每周日十点半开始，十二点结束，结束时间是固定的)，请注意做题时间。</li>
                                        <li>比赛过程中将请求获取摄像头权限，并<b>禁止切换</b>网页，防止<b>作弊</b>行为。</li>
                                        <li>若发现抄袭或作弊行为，<b>参赛资格将取消</b>，比赛成绩将<b>作废</b>。</li>
                                    </ol>
                                    <br>
                                    <br>
                                    <h4 class="text-300">
                                        <i class="fa fa-bullhorn"><img id="sayImg" src="${pageContext.request.contextPath}/images/jkf/say.svg" alt=""></i>
                                        &nbsp;通知
                                    </h4>

                    <p>
                        您必须先<b style="color: #25bb9b">报名</b>之后才可以参加该竞赛。请务必认真答题，不要出现作弊行为。祝您参赛愉快！
                    </p>
                </div>
                <div class="col-sm-4 col-md-3">
                    <h3 class="text-300">
                        <i class="fa fa-trophy"><img id="jiangImg" src="${pageContext.request.contextPath}/images/jkf/jiangbei.svg" alt=""></i>
                        &nbsp;竞赛奖励
                    </h3>
                    <ul class="list-group" style="margin-top: 20px">
                        <li class="list-group-item">
                            <b>第一名</b>
                            <span class="pull-right">40xp<img src="${pageContext.request.contextPath}/images/jkf/jingyan.svg"></span>
                        </li>
                        <li class="list-group-item">
                            <b>第二名</b>
                            <span class="pull-right">30xp<img src="${pageContext.request.contextPath}/images/jkf/jingyan.svg"></span>
                        </li>
                        <li class="list-group-item">
                            <b>第三名</b>
                            <span class="pull-right">20xp<img src="${pageContext.request.contextPath}/images/jkf/jingyan.svg"></span>
                        </li>
                        <li class="list-group-item">
                            <b>第4-10名</b>
                            <span class="pull-right">10xp<img src="${pageContext.request.contextPath}/images/jkf/jingyan.svg"></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="margin: 20px 0">
                <span id="spApp" class="h5" style="margin-right: 10px">
                    您还未报名&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-success" data-toggle="modal" data-target="#applicationNow">现在报名</button>
                    <!--如果更改状态后这里要变为取消报名按钮-->
                </span>
                <span id="spCan" class="h5" style="margin-right: 10px">
                    您已报名&nbsp;&nbsp;&nbsp;
                    <button  class="btn btn-danger" data-toggle="modal" data-target="#cancelNow">取消报名</button>
                    <div class="row" style="margin-top: 30px">
                    <div class="col-md-6">
                        <ul class="list-group hover-panel contest-question-list">
                            <li class="list-group-item heading">
                                题目列表
                                <span class="glyphicon glyphicon-question-sign pull-right" data-toggle="tooltip" data-placement="top" aria-hidden="true" id="questionMark"></span>
                                <span class="pull-right">得分&nbsp;&nbsp;</span>
                            </li>
                            <li class="list-group-item">
                                <a href="">题目名，a标签对应比赛编程界面</a>
                                <span class="badge">5</span>
                                <!--跳转到平时编程界面-->
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <div class="panel panel-default hover-panel ranking-list">
                            <div class="panel-heading">
                                本场排名
                            </div>
                            <table class="table table-hover table-striped">
                                <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th>得分</th>
                                    <th>
                                        <span>完成时间</span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>name</td>
                                    <td>score</td>
                                    <td>useTime</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="tips"><span>每个题对应的分值</span></div>
                </div>
                </span>
                <span id="contestBegin" style="margin-right: 10px">
                    比赛已经开始&nbsp;&nbsp;&nbsp;
                    <button id="begin" class="btn btn-success" data-toggle="modal" data-target="#beginContest">开始竞赛</button>
                </span>
                <span id="contestEnd" style="margin-right: 10px;display: none">
                    结束比赛并提交
                    <button id="end" class="btn btn-danger" data-toggle="modal" data-target="#endContest">结束竞赛</button>
                </span>
            </div>
        </div>
    </div>
</div>
<%--模态框--%>
<div class="modal fade" id="applicationNow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">报名</h4>
            </div>
            <div class="modal-body">
                确定要报名么?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a type="button" class="btn btn-info" data-dismiss="modal" id="application">确定</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="cancelNow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">报名</h4>
            </div>
            <div class="modal-body">
                确定要取消报名？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">不</button>
                <a type="button" class="btn btn-info" data-dismiss="modal" id="Cancel">确定</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="beginContest" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >竞赛</h4>
            </div>
            <div class="modal-body">
                竞赛即将开始！
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a type="button" class="btn btn-info" data-dismiss="modal" id="beginModal">开始</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="endContest" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">竞赛</h4>
            </div>
            <div class="modal-body">
                确定要结束竞赛？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a type="button" class="btn btn-info" data-dismiss="modal" id="endModal">确定</a>
            </div>
        </div>
    </div>
</div>
<script>
    var contestId="${id}";
    var strBeginTime="${contestTime.contestStartTime}";//竞赛开始时间
    var strEndTime = "${contestTime.contestEndTime}";//竞赛结束时间
    var date1 = new Date(strBeginTime);
    var date2 = new Date(strEndTime);
    var contestBeginTime =date1.getTime()-50400000;
    var contestEndTime = date2.getTime()-50400000;
    console.log(strBeginTime);
    console.log(strEndTime);
    console.log(date1);
    console.log(date2);
    console.log(contestBeginTime);
    console.log(contestEndTime);
</script>
<script src="${pageContext.request.contextPath}/js/contestWeek.js"></script>
<jsp:include page="../public/footer.jsp"/>
</body>
</html>